<template>
	<view class="content">
		<z-paging ref="paging" :auto-show-back-to-top="true" use-virtual-list @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view class="">
					<!-- 基本用法 -->
					<uni-search-bar placeholder="输入编码/名称搜索" :value="keyword" @confirm="search" @input="inputSearch" cancelButton="none"></uni-search-bar>
					<DaDropdownVue2
						v-if="dropdownMenuList.length != 0"
						:dropdownMenu="dropdownMenuList"
						@confirm="handleConfirm"
						@close="handleClose"
						@open="handleOpen"
					></DaDropdownVue2>
				</view>
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- <view class="item" slot="cell" slot-scope="{item,index}" @click="{{}}" >
				<view class="item-title">{{item.refcode}}</view>
				<view class="item-detail">{{item.refname}}</view>
			</view> -->
			<template #cell="{ item, index }">
				<u-cell-group :border="true">
					<u-cell
						v-if="$GC.BASEDOC.PSNDOC == refType"
						size="large"
						@click="itemClick"
						:title="item.refname"
						:label="item.refcode"
						:value="item.deptName"
						:border="false"
						:name="index"
					></u-cell>

					<u-cell
						v-else-if="$GC.BASEDOC.SM_USER == refType"
						size="large"
						@click="itemClick"
						:title="item.refname"
						:label="item.refcode"
						:value="item.deptName"
						:border="false"
						:name="index"
					></u-cell>

					<u-cell
						v-else-if="$GC.BASEDOC.MATERIAL == refType"
						size="large"
						@click="itemClick"
						:title="item.refname"
						:label="item.refcode"
						:value="item.materialspec"
						:border="false"
						:name="index"
					></u-cell>

					<u-cell
						v-else-if="$GC.BASEDOC.ORG == refType"
						size="large"
						@click="itemClick"
						:title="item.refname"
						:label="item.refcode"
						:value="item.value"
						:border="false"
						:name="index"
					></u-cell>

					<u-cell v-else size="large" @click="itemClick" :title="item.refname" :label="item.refcode" :value="item.value" :border="false" :name="index"></u-cell>
				</u-cell-group>
			</template>
		</z-paging>
	</view>
</template>

<script>
/**
 * @author liuwqc
 * @date 2023/09/19
 * listref 列表参照
 */
import { BASEDOC } from '@/common/const/index';
import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue';
export default {
	components: { DaDropdownVue2 },
	data() {
		return {
			keyword: '',
			indexList: [],
			searchIndexList: [],
			tabIndex: 0,
			refType: '', //档案类型
			dropdownMenuList: []
		};
	},
	onLoad(options) {
		if (options && options.refparam) {
			let refparam = JSON.parse(options.refparam);
			let { refType, queryCondition } = refparam;
			if (refType) {
				this.refType = refType;
			}
			const value = uni.getStorageSync(refType);
			let resultArrs = [];

			// 执行搜索条件
			if (value && JSON.stringify(queryCondition) != '{}') {
				for (let i = 0; i < value.length; i++) {
					let obj = value[i];
					for (const attrName in queryCondition) {
						if (Object.hasOwnProperty.call(queryCondition, attrName)) {
							const keyWord = queryCondition[attrName];
							if (!keyWord) {
								resultArrs.push(obj);
								continue;
							}
							if (obj[attrName] && obj[attrName].includes(keyWord)) {
								resultArrs.push(obj);
								continue;
							}
						}
					}
				}
			} else {
				resultArrs = value;
			}
			this.indexList = resultArrs;
			this.searchIndexList = resultArrs;

			if (this.$GC.BASEDOC.DEPT == refType || this.$GC.BASEDOC.PSNDOC == refType) {
				this.initDropdownMenuList();
			}

			if (this.$GC.BASEDOC.PSNDOC == refType) {
				let options = [];
				let deptArrs = uni.getStorageSync(this.$GC.BASEDOC.DEPT);
				deptArrs.map((item) => {
					let option = {
						label: item.refname,
						value: item.refname
					};
					options.push(option);
				});

				let dropdownItem = {
					title: '部门',
					type: 'cell',
					prop: 'pk_dept',
					showAll: true,
					showIcon: true,
					// value: '2', // 默认内容2
					options: []
				};
				dropdownItem.options = options;
				this.dropdownMenuList.push(dropdownItem);
			}
		}
	},
	methods: {
		initDropdownMenuList() {
			let dropdownItem = {
				title: '组织',
				type: 'cell',
				prop: 'pk_org',
				showAll: true,
				showIcon: true,
				// value: '2', // 默认内容2
				options: []
			};
			let userInfo = uni.getStorageSync(this.$GC.LOGININFO_KEY);
			let pk_org = userInfo.pk_org;

			// 读取组织信息
			let pkOrgs = uni.getStorageSync(this.$GC.BASEDOC.ORG);
			let options = [];
			pkOrgs.map((item) => {
				let option = {
					label: item.refname,
					value: item.refid
				};
				options.push(option);
			});
			dropdownItem.options = options;
			this.dropdownMenuList.push(dropdownItem);
		},

		handleConfirm(v, selectedValue) {
			console.log('handleConfirm ==>', v, selectedValue);
			let keyWord = v['pk_dept'];
			if (!keyWord || keyWord == '-9999') {
				uni.$u.debounce(this.toNext(""), 500);
				return;
			}
			
			let searchArr = [];
			if (this.indexList) {
				for (let i = 0; i < this.indexList.length; i++) {
					let obj = this.indexList[i];
					if (obj.deptName && obj.deptName.includes(keyWord)) {
						searchArr.push(obj);
						continue;
					}
				}
			}
			this.searchIndexList = searchArr;
			// this.$refs.paging.setLocalPaging(searchArr);
			this.$refs.paging.reload();
		},
		handleClose(v, callbackMenuList) {
			console.log('handleClose ==>', v, callbackMenuList);
		},
		handleOpen(v) {
			console.log('handleOpen ==>', v);
		},
		inputSearch(e) {
			uni.$u.debounce(this.toNext(e), 500);
		},
		toNext(keyWord) {
			// keyWord = keyWord;
			let searchArr = [];
			if (this.indexList) {
				for (let i = 0; i < this.indexList.length; i++) {
					let obj = this.indexList[i];
					if (obj.refcode && obj.refcode.includes(keyWord)) {
						searchArr.push(obj);
						continue;
					}
					if (obj.refname && obj.refname.includes(keyWord)) {
						searchArr.push(obj);
						continue;
					}
				}
			}
			this.searchIndexList = searchArr;
			// this.$refs.paging.setLocalPaging(searchArr);
			this.$refs.paging.reload();
		},
		search(e) {
			let keyWord = e.value.toUpperCase();
			let searchArr = [];
			if (this.indexList) {
				for (let i = 0; i < this.indexList.length; i++) {
					let obj = this.indexList[i];
					if (obj.refcode && obj.refcode.includes(keyWord)) {
						searchArr.push(obj);
						continue;
					}
					if (obj.refname && obj.refname.includes(keyWord)) {
						searchArr.push(obj);
						continue;
					}
				}
			}
			this.searchIndexList = searchArr;
			// this.$refs.paging.setLocalPaging(searchArr);
			this.$refs.paging.reload();
		},
		itemClick(event) {
			const eventChannel = this.getOpenerEventChannel();
			// emit 代表的就是向上一个页面传递需要更新的数据
			eventChannel.emit('refPageCallBack', this.searchIndexList[event.name]);
			uni.navigateBack();
		},
		scrolltolower() {
			this.loadmore();
		},

		queryList(pageNo, pageSize) {
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
			try {
				if (this.searchIndexList) {
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.setLocalPaging(this.searchIndexList);
				}
			} catch (e) {
				//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				this.$refs.paging.setLocalPaging(false);
			}
		}
	}
};
</script>

<style>
.item {
	border-bottom: 1rpx #eeeeee solid;
	position: relative;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0rpx 30rpx;
}

.item-detail {
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: white;
	background-color: #007aff;
}

.item-line {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	height: 1px;
	width: 100%;
	background-color: #eeeeee;
}
</style>
